<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '排行榜',
	},
}
</route>

<template>
	<view class="page-exercise">
		<fly-navbar
			:backgroundColor="paperDetailsInfo && pageInfo.thisPage === 1 ? 'transparent' : '#fff'"
			:leftText="paperDetailsInfo?.paper_name || '练习题'"
			:textColor="paperDetailsInfo && pageInfo.thisPage === 1 ? '#fff' : '#303030'"
			fixed
		/>
		<image
			class="w-full h-full fixed top-0 left-0 z-1"
			:src="baseImg + '/book/book-exercise-bg.jpg'"
		></image>
		<view
			class="w-full h-[100vh] absolute top-0 left-0 z-2 box-border"
			:style="{ paddingTop: barAlbright + 'rpx' }"
		>
			<scroll-view
				scroll-y
				class="w-full h-full box-border"
				v-if="paperDetailsInfo && pageInfo.thisPage === 1"
			>
				<view class="w-full pt-[207rpx] pb-[65rpx] px-[34rpx] box-border">
					<view
						class="w-full bg-white relative min-h-[400rpx] rounded-[33rpx] flex flex-col items-center paper-item px-[35rpx] pb-[46rpx] box-border"
					>
						<image
							class="w-[170rpx] h-[211rpx] rounded-[25rpx] -mt-[85rpx] border-1 border-solid border-[#fff] paper-image"
							:src="paperDetailsInfo.book_cover_img"
						></image>
						<view class="w-full pt-[27rpx]">
							<book-paper
								:list="paperDetailsInfo.qtrunk"
								:current="current"
								type="read"
							></book-paper>
							<view
								:class="[
									'w-full',
									'grid',
									current <= 1 ? 'grid-cols-1' : 'grid-cols-2 gap-x-[26rpx]',
									'mt-[87rpx]',
								]"
							>
								<view
									class="w-full h-[111rpx] rounded-[55rpx] flex justify-center items-center text-[#303030] text-[32rpx]"
									style="background: #f0f1f3"
									@tap="prev"
									v-if="current > 1 || current === paperDetailsInfo.qtrunk.length"
									>上一题</view
								>
								<view
									class="w-full h-[111rpx] rounded-[55rpx] flex justify-center items-center text-[#fff] text-[32rpx]"
									style="background: #3aa2e4"
									@tap="next"
									v-if="current < paperDetailsInfo.qtrunk.length"
									>下一题</view
								>
								<view
									class="w-full h-[111rpx] rounded-[55rpx] flex justify-center items-center text-[#fff] text-[32rpx]"
									style="background: #3aa2e4"
									@tap="backDetail"
									v-if="current === paperDetailsInfo.qtrunk.length"
									>完成</view
								>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<no-page
				v-if="pageInfo.thisPage === 0"
				height="100%"
				:type="pageInfo.type"
				:title="pageInfo.title"
				:btnTitle="pageInfo.btnTitle"
				@click="retry"
			></no-page>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { systemInfo } from '@/utils/getSystemInfo';
import { formatTime } from '@/utils';
import { getPaperInfo } from '@/service/book';
import BookPaper from '../components/book-paper.vue';
import { useUserStore } from '@/store';
import { toAuthPage } from '@/utils/jump';
import onShare from '@/hooks/useShare';
import { storeToRefs } from 'pinia';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { onShareAppMessage, onShareTimeline } = onShare();

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
const { statusBarHeight, navHeight } = systemInfo();
const barAlbright = ref(0);
const query = ref(null);
const pageInfo = ref<{ thisPage: number; title: string; type: string; btnTitle?: string }>({
	thisPage: -1,
	title: '暂无数据',
	type: 'btn',
	btnTitle: '重试',
});
const paperDetailsInfo = ref(null);
const current = ref(1);

onLoad(options => {
	if (!userInfo.value.school_id) {
		// 分享或者进入未登录
		pageInfo.value = {
			thisPage: 0,
			type: 'btn',
			title: '还没有登录',
			btnTitle: '登录',
		};
		uni.hideShareMenu({ hideShareItems: ['qq', 'qzone'] });
		return;
	}
	// 试卷 id
	if (options.id) {
		query.value = options;
	} else {
		pageInfo.value = {
			thisPage: 0,
			title: '查询异常',
			type: 'msg',
		};
	}
});

onShow(() => {
	barAlbright.value = navHeight + statusBarHeight;
	if (query.value.id) {
		getInfo();
	}
});

const getInfo = async () => {
	uni.showLoading({
		title: '加载中...',
	});
	try {
		const res = await getPaperInfo({
			paper_id: query.value.id,
		});
		uni.hideLoading();
		if (res.status_code === 200 && res.data) {
			pageInfo.value.thisPage = 1;
			if (res.data.qtrunk.length) {
				res.data.qtrunk.forEach(item => {
					item.answer = '';
				});
			}
			paperDetailsInfo.value = res.data;
		} else {
			uni.showToast({
				icon: 'none',
				title: res.status_code !== 200 ? res.message : '查询异常,请重试',
			});
			pageInfo.value = {
				thisPage: 0,
				title: res.status_code !== 200 ? res.message : '查询异常,请重试',
				type: 'btn',
			};
		}
	} catch (error) {
		uni.hideLoading();
		pageInfo.value = {
			thisPage: 0,
			title: '查询异常,请重试',
			type: 'btn',
		};
		uni.showToast({
			icon: 'none',
			title: '查询异常,请重试',
		});
	}
};

const retry = () => {
	if (!userInfo.value.school_id) {
		// 分享或者进入未登录
		toAuthPage({}, { type: 'switchTab', url: '/pages/index/index' });
		return;
	}
	getInfo();
};

const prev = () => {
	current.value--;
};
const next = () => {
	current.value++;
};
const backDetail = () => {
	const args = uni.getStorageSync('getCurrentPageUrlWithArgs');
	if (args.type === '') {
		uni.navigateTo({
			url: args.url,
		});
	} else {
		uni.switchTab({
			url: '/pages/index/index',
		});
	}
};
</script>

<style lang="scss" scoped>
.page-exercise {
	.paper-item {
		box-shadow:
			0rpx 0rpx 3rpx 0rpx rgb(0 0 0 / 3%),
			0rpx 5rpx 21rpx 0rpx rgb(0 0 0 / 7%);
	}

	.paper-image {
		box-shadow:
			0rpx 0rpx 3rpx 0rpx rgb(0 0 0 / 3%),
			0rpx 5rpx 21rpx 0rpx rgb(0 0 0 / 7%);
	}
}
</style>
